/**/
#body{
     background-color: #ffffff;
    }

#h01{
	color: red;
	text-align: center;
  }
.p01{
	font-family: "Times New Roman";
	font-size: 20px;
	color:red;
}

.p02{
	background-image: url(../Resource/base_test_love.png);
	background-repeat: no-repeat;
	background-position: top;
}

/*****************************1.文本样式************************************************/
#div_01{
	background-color: yellow;


}

.title_01{
    text-align: center;
	font-size: 30px;
	color: blue;	
	text-shadow:2px 2px #FF0000;   /*文本阴影*/
}
.date_01{
	text-align: right;
	text-decoration: underline;  /*划线*/
}

.content_01{
	text-align:justify;
	text-indent: 2%    /*文本缩进*/
}



a.link_one:link,a.link_one:visited{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}

a.link_one:hover,a.link_one:active{
	background-color:#7A991A;
}


a.link_two:link,a.link_two:visited{
	display:block;
	font-weight:normal;
	color:red;
	background-color:green;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}

a.link_two:hover,a.link_two:active{
	background-color:black;
}

/*****************************2.列表样式***********************************************/
.div_02{
	background-color: yellow;
	width: 50%
}

h1.title_02{
	text-align: center;
	font-size: 30px;
	color: blue;
}

ol.div_ol_02{
	list-style-type: upper-alpha;
}

ul.div_ul_02{
	list-style-type: none;
	list-style-image: url(../Resource/base_test_love.png);
    background-position: 10px 10px;
    padding: 40px;
    background-repeat: no-repeat; 
}

/*****************************3.表格样式***********************************************/
.div_03{
	background-color: yellow;
	width: 50%	
}

h1.title_03{
	text-align: center;
	font-size: 20px;
	color: red;
}
.table_01{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: :15px;
	width: 100%;
	border-collapse:collapse;
}
.table_01 td, .table_01 th{
	border:1px;
	border-color: #98bf21;
	padding:3px 7px 2px 7px;
	background-color: green;
	text-align: left;
}


/*****************************4.盒子模型***********************************************/
#div_04{
	background-color: yellow;
	width: 50%;
}
.title_04{
	text-align: center;
	font-size: 20px;
	color: red;
}
.hezimodel_img{
	width: 50%; 
	height: 200px; 
    display: inline-block;
    margin-left: 100px;


    /*边框样式和颜色border*/
    border-top-style: dotted;
    border-top-color: red;
     
    border-bottom-style: solid; 
    border-bottom-color: blue;

    border-left-style: solid; 
    border-left-color: green;

    border-right-style: solid; 
    border-right-color: orange;
}
.lunkuo01{
	/*outline 轮廓*/
	outline-color: #999999;
	outline-style: inset;
	outline-width: medium;
}
.margin01{
	/*margin外边距的*/
	margin-left: 10px
	margin-top: 20px
	margin-right: 30px
	margin-bottom: 40px
}
.padding01{
	/*padding外边距的*/
	padding-left: 40px
	padding-top: 50px
	padding-right: 60px
	padding-bottom: 70px
}
.display01{
	/*行内块级元素*/
	display: inline-block;
}
.position_relative_01{
	/*定位*/
	left: 30px;
	/*static:  静态定位的元素不会受到 top, bottom, left, right影响。
	 fixed:  即使窗口是滚动的它也不会移动
	 relative： 相对定位元素的定位是相对其正常位置。
	 absolute：绝对定位的元素的位置相对于最近的已定位父元素
	 sticky ： 滚动的时候粘贴定位*/
	position: relative;

}

.position_sticky_01{
	padding: 2px;
	background-color: blue;
	border-width: 5px;
	border-color: red;
	border-style: solid;
	position: sticky;
	position: -webkit-sticky;

}


/*****************************5.Float浮动***********************************************/
#div_05{
	background-color: yellow;
	width: 50%;
}
.title_05{
	text-align: center;
	font-size: 20px;
	color: red;
}
.div_05_image_01{
	float: right;
}
.div_05_image_01{
	clear: both;
	margin: 5px;
	width: 80px;
	height: 80px;
}


/*****************************6.居中对齐***********************************************/
#div_06{
	background-color: gray;
	width: 50%;
}
.title_06{
	text-align: center;
	font-size: 20px;
	color: blue;
}
.div_06_center_01{
	/*如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。*/
	 margin: auto;
     width: 50%;
     border:3px solid red;
     padding: 5px;
     text-align: center;
}
.div_06_center_02{
	text-align: center;
}
.div_06_center_03{
	margin: auto;
	display: block;
}
.div_06_center_04{
	padding-top:20px;
	padding-bottom: 20px;
	text-align: center;
	border: 2px solid blue;  
}
.div_06_center_05{
	border: 2px solid yellow;
	line-height: 80px;
}
.div_06_center_06{
	margin:0px;
	/*top: 50%;
	left:50%;*/
	border: 2px solid orange;
	position: absolute;
	transform: translate(50%,50%);

}

/*****************************7.伪类Pseudo-classes***********************************************/

.div_07{
	background-color: purple;
	width: 50%;
}
.title_07{
	text-align: center;
	font-size: 20px;
	color: blue;
}
.div_07_a_01:visited{
    color: red;
}
a.div_07_a_01:hover{
	color: blue;
}
p.div_07_p_01>i:first-child{
	color: red;
}
.div_07_p_02:first-letter{
	color: #ff0000;
	font-size: xx-large;
}
.div_07_p_02:first-line{
	color:#0000ff;
	font-variant:small-caps;
}
.div_07_p_03:after{
	content: url(../Resource/base_test_love.png);
}